<template>
  <el-form :model="formData">
    <el-form-item label="单选模式">
      <CheckCard
        v-model="formData.singleValue"
        v-model:label="formData.singleLabel"
        :options="options"
        @change="handleChange"
      />
      <h5>当前值: {{ formData.singleValue }} label值： {{ formData.singleLabel }}</h5>
    </el-form-item>

    <el-form-item label="多选模式">
      <CheckCard
        v-model="formData.multipleValue"
        v-model:label="formData.multipleLabel"
        multiple
        :options="options"
        @change="handleChange"
      />
      <h5>当前值: {{ formData.multipleValue }} label值： {{ formData.multipleLabel }}</h5>
    </el-form-item>
  </el-form>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

const formData = ref({
  singleValue: 'option1',
  singleLabel: '选项1',
  multipleValue: ['option1'],
  multipleLabel: '选项1',
});

const options = [
  {
    value: 'option1',
    label: '选项1',
    disabled: true,
    desc: '这是选项1的描述 按课时计划喀什尽快哈实践活动卡号是',
    cover: 'https://dummyimage.com/100x100/4CAF50/fff',
  },
  {
    value: 'option2',
    label: '选项2',
    extra: '这是选项2的额外信息这是选项2的额外信息这是选项2的额外信息',
    desc: '这是选项2的描述',
    cover: 'https://dummyimage.com/100x100/2196F3/fff',
  },
  {
    value: 'option3',
    label: '选项3',
    desc: '这是选项3的描述',
    cover: 'https://dummyimage.com/100x100/F44336/fff',
  },
  {
    value: 'option4',
    label: '选项4',
    desc: '这是选项4的描述',
    cover: 'https://dummyimage.com/100x100/F43682/fff',
  },
];

const handleChange = (value: any) => {
  console.log('值变化:', value);
};
</script>
